<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">获取</button>
    <button class="set">设置</button>
    <br>
    <br>
    <br>
    <form action="./login.html" method="get">
        <div class="input-group">
            <label for="">用户名:</label>
            <!-- value="a123123"  表单的默认值(初始值) -->
            <!-- disabled="disabled" 页面加载时,用户名默认禁用 -->
            <input type="text" name="user" value="a123123" disabled hidden>
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <!--   required="required"  页面加载时,密码默认必填-->
            <input type="text" name="pwd" required>
        </div>
        <div class="input-group">
            <label for="">记住用户名:</label>
            <!--   checked="checked"  页面加载时,默认选中-->
            <input type="checkbox" name="isRem" checked>
        </div>

        <div class="input-group">
            <input type="submit" value="提交">
        </div>
    </form>
</body>
<script>

    // 元素节点的属性(表单状态相关)
    // disabled   返回表单元素是否禁用(true:禁用 false:可用)
    // required   返回表单元素是否必填(true:必填 false:选填)
    // hidden     返回表单元素是否隐藏(true:隐藏 false:显示)
    // checked    返回表单元素(单选框和复选框)是否选中(true:选中 false:不选)



    var getBtn = document.getElementsByClassName("get")[0];
    var setBtn = document.getElementsByClassName("set")[0];

    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var isRem = document.getElementsByName("isRem")[0];

    getBtn.onclick = function () {
        // var user = userInp.value;
        // console.log(user);

        console.log(userInp.disabled);
        console.log(pwdInp.required);
        console.log(userInp.hidden);
        console.log(isRem.checked);
    }

    setBtn.onclick = function () {
        userInp.hidden = false;
        userInp.disabled = false;
        pwdInp.required = false;
        isRem.checked = false;
    }

</script>

</html>